{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/forms/bootstrapvalidator/bootstrapValidator.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/applicationbootstrap/js/forms/bootstrapvalidator/bootstrapValidator.js') }}" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function() {
		    $('#defaultForm').bootstrapValidator({
		        message: 'This value is not valid',
		        feedbackIcons: {
		            valid: 'glyphicon glyphicon-ok',
		            invalid: 'glyphicon glyphicon-remove',
		            validating: 'glyphicon glyphicon-refresh'
		        },
		        fields: {
		            username: {
		                message: 'The username is not valid',
		                validators: {
		                    notEmpty: {
		                        message: 'The username is required and can\'t be empty'
		                    },
		                    stringLength: {
		                        min: 6,
		                        max: 30,
		                        message: 'The username must be more than 6 and less than 30 characters long'
		                    },
		                    regexp: {
		                        regexp: /^[a-zA-Z0-9_\.]+$/,
		                        message: 'The username can only consist of alphabetical, number, dot and underscore'
		                    }
		                }
		            },
		            country: {
		                validators: {
		                    notEmpty: {
		                        message: 'The country is required and can\'t be empty'
		                    }
		                }
		            },
		            acceptTerms: {
		                validators: {
		                    notEmpty: {
		                        message: 'You have to accept the terms and policies'
		                    }
		                }
		            },
		            email: {
		                validators: {
		                    notEmpty: {
		                        message: 'The email address is required and can\'t be empty'
		                    },
		                    emailAddress: {
		                        message: 'The input is not a valid email address'
		                    }
		                }
		            },
		            website: {
		                validators: {
		                    uri: {
		                        allowLocal: true,
		                        message: 'The input is not a valid URL'
		                    }
		                }
		            },
		            phoneNumberUS: {
		                validators: {
		                    phone: {
		                        message: 'The input is not a valid US phone number'
		                    }
		                }
		            },
		            zipCode: {
		                validators: {
		                    zipCode: {
		                        country: 'US',
		                        message: 'The input is not a valid US zip code'
		                    }
		                }
		            },
		            password: {
		                validators: {
		                    notEmpty: {
		                        message: 'The password is required and can\'t be empty'
		                    },
		                    identical: {
		                        field: 'confirmPassword',
		                        message: 'The password and its confirm are not the same'
		                    }
		                }
		            },
		            confirmPassword: {
		                validators: {
		                    notEmpty: {
		                        message: 'The confirm password is required and can\'t be empty'
		                    },
		                    identical: {
		                        field: 'password',
		                        message: 'The password and its confirm are not the same'
		                    }
		                }
		            },
		            ages: {
		                validators: {
		                    lessThan: {
		                        value: 100,
		                        inclusive: true,
		                        message: 'The ages has to be less than 100'
		                    },
		                    greaterThan: {
		                        value: 10,
		                        inclusive: false,
		                        message: 'The ages has to be greater than or equals to 10'
		                    }
		                }
		            }
		        }
		    });
		});
	</script>
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="page-header">
          <h1>Bootstrapvlidator DevOOPS </h1>
        </div>
        <div class="row">
            <div class="col-sm-offset-2 col-sm-8">

				<form id="defaultForm" class="form-horizontal" role="form" action="{{ path('_validations_bootstrap-vlidations-jQuery-DevOOPS') }}" method="post" novalidate>
				    
				    <div class="page-header">
				        <h3>Not Empty validator</h3>
				    </div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Username</label>
					    <div class="col-sm-9">
					        <input type="text" class="form-control" name="username">
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Country</label>
					    <div class="col-sm-9">
					        <select class="form-control" name="country">
							  <option value="">-- Select a country --</option>
									<option value="fr">France</option>
									<option value="de">Germany</option>
									<option value="it">Italy</option>
									<option value="jp">Japan</option>
									<option value="ru">Russia</option>
									<option value="gb">United Kingdom</option>
									<option value="us">United State</option>
							</select>
					    </div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-3 col-sm-9">
							<div class="checkbox">
							    <label>
							        <input type="checkbox" name="acceptTerms">Accept the terms and policies
							    </label>
							</div>
						</div>
					</div>
					
					<div class="page-header">
						<h3>Regular expression based validators</h3>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Email address</label>
					    <div class="col-sm-9">
					        <input type="email" class="form-control" name="email">
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Website</label>
					    <div class="col-sm-9">
					        <input type="url" class="form-control" name="website">
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Phone number</label>
					    <div class="col-sm-4">
					        <input type="text" class="form-control" name="phoneNumberUS">
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">US zip code</label>
					    <div class="col-sm-4">
					        <input type="text" class="form-control" name="zipCode">
					    </div>
					</div>
					
					<div class="page-header">
						<h3>Identical validator</h3>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Password</label>
					    <div class="col-sm-9">
					        <input type="password" class="form-control" name="password">
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Retype password</label>
					    <div class="col-sm-9">
					        <input type="password" class="form-control" name="confirmPassword">
					    </div>
					</div>
					
					<div class="page-header">
						<h3>Other validators</h3>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Ages</label>
					    <div class="col-sm-4">
					        <input type="text" class="form-control" name="ages">
					    </div>
					</div>
					
					<div class="form-group">
					    <div class="col-sm-offset-3 col-sm-9">
					        <button type="submit" class="btn btn-primary">Submit</button>
					    </div>
					</div>
					
				</form>
				
            </div>
        </div>
    </div> <!-- /container -->
{% endblock %}